{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/detail_page.css?version={$version}"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/pinglun_loading1.css?version={$version}"/>
	<style type="text/css">
		#load_wrapper{
			margin-bottom:2.45rem;
		}
		#load_wrapper .comment-list{
			margin-bottom:0.8rem;
			background:#fff;
		}
		.swiper-container {
	        width: 100%;
	        height: 100%;
	    }
	    .swiper-container-horizontal>.swiper-pagination{
	    	bottom:1rem;
	    }
	    .swiper-pagination-bullet{
	    	width:0.4rem;
	    	height:0.4rem;
	    	margin:0 0.5rem;
	    	border:0.1rem solid #fff;
	    	background:rgba(255,255,255,0.1);
	    }
	    .swiper-pagination-bullet-active{
	    	background:#fff;
	    	opacity:1;
	    }
	    h1{
	    	width:80%;
	    	overflow: hidden;
		    text-overflow: ellipsis;
		    -webkit-line-clamp: 1;
		    -webkit-box-orient: vertical;
		    display: -webkit-box;
		    margin:1rem 0 0;
	    }
	    .party ul span{
	    	width:16%;
	    	margin-right:0.8rem;
	    	text-align: justify;
	    	text-align-last: justify;
	    }
	    .comment_cont{
	    	margin:0;
	    	box-sizing:border-box;
	    	padding-right:0.5rem;
	    }
	    .comment_icon{
	   		width:2rem;
	   		height:2rem;
	   		float:right;
	   		position:relative;
	   		overflow:hidden;
	   }
	   .comment_icon input{
	   		display:block;
	   		width:2rem;
	   		height:2rem;
	   		position:absolute;
	   		top:0;
	   		right:0;
	   		border:0;
	   		background:none !important;
	   		box-sizing:border-box;
	   		padding-left:5rem;
	   }
	   .comment_icon span{
		   	position:absolute;
		   	top:0;
		   	left:0;
		   	right:0;
		   	bottom:0;
		   	margin:auto;
	   }
	   .comment-list dl dd{
	   	    margin: 0.8rem 0 0.75rem 0.5rem;
	   }
	   .comment-list dl dd p{
	   	margin-top:0.2rem;
	   }
	   .comment_icon {
	   		width:1rem;
	   		height:1rem;
	   }
	   .comment_cont .date{
	   		margin-right:0.5rem;
	   }
	   .comment-list dl{
	   	padding-bottom:0.75rem;
	   }
	   .list_title {
	   		font-size:0.7rem;
	   		color:#323232;
	   }
	</style>
{/block}
{block name="content"}
{include file="../detail_header.html"}
<div id="load_wrapper">
	<div id="scroller">
		<div class="park_detail_banner">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					{foreach from=$pic_arr item=pic}
					<div class="swiper-slide">
						<a href="javascript:;">
							<img src="{$pic}" class="share_pic"/>
						</a>
					</div>
					{/foreach}
				</div>
				<!--分页器 -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<!--生日派对-->
		<div class="party internet">
			<div class="clearfix title" style="margin-bottom:1.25rem;">
				<h1 class="fl">{$activity_info.activity_title}</h1>
				<span class="fr like-num" style="margin-top:1.4rem;">{$activity_info.praise_num}</span>
				<span class="fr like {if $is_praise}like-select{else}like-default{/if}" style="margin-top:1.4rem;"></span>
			</div>
			<ul>
				<li class="clearfix mg-top0">
					<span class="fl">主办</span>
					<p class="fl">{$activity_info.sponsor}</p>
				</li>
				<li class="clearfix">
					<span class="fl">承办</span>
					<p class="fl">{$activity_info.contractor}</p>
				</li>
				<li class="clearfix">
					<span class="fl">预告时间</span>
					<p class="fl">{date('Y年m月d号 H:i',$activity_info.notice_date)}</p>
				</li>
				<li class="clearfix">
					<span class="fl">活动时间</span>
					<p class="fl">{date('Y年m月d号 H:i',$activity_info.start_date)}</p>

				</li>
				<li class="clearfix">
					<span class="fl">活动报名费</span>
					<p class="fl">{if $activity_info.sign_money != 0.00}{$activity_info.sign_money}元{else}免费{/if}</p>
				</li>
				<li class="clearfix">
					<span class="fl">地址</span>
					<p class="fl">{$activity_info.activity_address}</p>
				</li>
				<li class="clearfix" style="display:flex;align-items:center;">
					<span class="fl">电话</span>
					<a href="tel:{$activity_info.phone}" class="fl phone">
						{$activity_info.phone}
					</a>
				</li>
			</ul>
			<a href="javascript:void(0)" class="word-intro">
				<p>{$activity_info.contents}</p>
			</a>
			<div class="shrink-btn">
				<span>展开活动详情简介</span>
				&nbsp;
				<i class="icon icon_zhankai_default3x"></i>
			</div>
			<div class="spread-btn" style="display:none;">
				<span>收缩活动详情简介</span>
				&nbsp;
				<i class="icon icon_shousuo_default3x"></i>
			</div>
		</div>

		<!--活动评论-->
		<div class="comment">
			<h2>活动评论</h2>
		</div>
		<div class="comment-list">
			{foreach from=$comment_list item=this}
			<dl class="clearfix">
				<dt class="fl">
					<img src="{$this.comment.portrait}"/>
				</dt>
				<dd class="fl">
					<div class="clearfix comment_cont">
						<h3 class="fl to_nickname" >{$this.comment.nickname}</h3>
						<div class="comment_icon fr">
							<span class="icon icon_pinglun3x"></span>
							<input type="text" class="input_icon" data-id='{$this.comment.comment_id}'/>
						</div>
						<span class="fr date">{date('Y-m-d',$this.comment.addtime)}</span>
					</div>
					<p>{$this.comment.contents}</p>
				</dd>
				<!--评论回复-->
				{if $this.replay}
				<ul class="reply_cont fl"  data-id='{$this.comment.comment_id}'>
					{foreach from=$this.replay item=replay}
					<li class="com_list clearfix">
						<div class="list_title fl">
						<span class="first_word name" >{$replay.from_nickname}</span>
							{if $replay.reply_comment_id}
							<span class="hf_word">回复</span>
							<span class="last_word name">{$replay.to_nickname}</span>
							{/if}
							：<span class="info_word">{$replay.contents}</span>
						</div>
						<input type="text" class="show_keybord" />
					</li>
					{/foreach}
				</ul>
				{/if}
			</dl>
			{/foreach}
		</div>
		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
		</div>
	</div>
</div>
{if $activity_info.is_end}
<footer class="footer_fixed" >
<div class="footer_comment"><a href="javascript:;" onclick="check_user('/FrontActivity/activity_comment/activity_id/{$activity_info.activity_id}')" >我要评论</a></div>
<div class="footer_comment" style="background: #ccc">活动已结束</div>
</footer>
{else}
<footer class="footer_fixed active_foot_btn">
	<div class="footer_comment"><a href="javascript:;" onclick="check_user('/FrontActivity/activity_comment/activity_id/{$activity_info.activity_id}')" >我要评论</a></div>

		{if $is_sign == 2}
		<a href="javascript:;" style='background: #ccc;'>已报名</a>
		{elseif $is_sign == 1}
		<a href="javascript:;" style='background: #ccc;'>待审核</a>
		{elseif $is_sign === 0}
		<a href="javascript:;" style='background: #ccc;'>待支付</a>
		{else}
		<a href="javascript:;" onclick="check_user('/FrontActivity/sign_up/activity_id/{$activity_info.activity_id}')" class="red">我要报名</a>
		 <!--<a href="/FrontActivity/sign_up/activity_id/{$activity_info.activity_id}" class="red">我要报名</a> -->
		{/if}
</footer>
<div class="comment_input_wrap comment_hide">
	<input type="text" class="comment_input" placeholder="说点什么吧..." />
	<span class="comment_send no_send">发送</span>
</div>
{/if}





{/block}
{block name="js"}
<script>
	var total=parseInt('{$total}');
	var firstRow=parseInt('{$firstRow}');
	var activity_id =parseInt('{$activity_id}');
	var from={$from};

</script>
<script type="text/javascript" src="__PUBLIC__/Js/front/swiper.3.1.2.jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/comment_load.js"></script>
<script type="text/javascript">
	// var telephone = '{$activity_info.phone}';
	//分享的参数
	var share_pic = $('.share_pic').eq(0).attr('src');
	var share_title = '{$activity_info.activity_title}';
	var desc_str = '{$activity_info.describe}';
	var share_desc = desc_str.substr(0,30);
	var share_url = document.location.href;
	var cur_name='{$cur_nickname}';

	var to_nickname,reply_comment_id;
	{literal}
	//点击评论图标
	var commentFlag = false;
	$("body").on("focus",".input_icon",function(){
		if($(".active_foot_btn")){
			$(".active_foot_btn").hide();
		}
		var _this = $(this);
		$(".comment_input_wrap").removeClass("comment_hide");
		$(".comment_input").focus();
		$(".comment_input").attr({
			"placeholder":"说点什么吧..."
		})
		setTimeout(function(){
			_this.blur();
		},100);
		commentFlag = true;
		reply_comment_id = $(this).attr("data-id");
//		to_nickname = $(this).parent().siblings(".to_nickname").html();
	});

	//回复评论
	$("body").on("focus",".show_keybord",function(e){
		if($(".active_foot_btn")){
			$(".active_foot_btn").hide();
		}
		commentFlag = false;
		var _this = $(this);
		$(".comment_input_wrap").removeClass("comment_hide");
		$(".comment_input").focus();
		setTimeout(function(){
			_this.blur();
		},100);
		reply_comment_id = $(this).parent().parent('.reply_cont').attr("data-id");
		to_nickname = $(this).siblings('.list_title').children('.name').html();
		$(".comment_input").attr({
			"placeholder":"回复："+to_nickname
		})
	});
	$(".comment_send").on("click",function(){
		$(this).addClass("no_send");
		contents = $(".comment_input").val();
		if(contents!=""){
			$(".comment_input").blur();
			$(".comment_input_wrap").addClass("comment_hide");
			setTimeout(function(){
				$(".active_foot_btn").show();
			},100);
			$.ajax({
				url:'/FrontActivity/replay',
				type:'post',
				data:{to_nickname:to_nickname, activity_id:activity_id, comment_type:3, reply_comment_id:reply_comment_id, contents:contents},
				success:function(r){
					var html='';
					if(r.code == 1){
						if(commentFlag){
							html+='<li class="com_list clearfix">'+
								'<div class="list_title fl">'+
								'<span class="first_word name" >'+cur_name+'</span>：'+
								'<span class="info_word">'+contents+'</span>'+
								'</div>'+
								'<input type="text" class="show_keybord" />'+
								'</li>';
						}else{
							html+='<li class="com_list clearfix">'+
								'<div class="list_title fl">'+
								'<span class="first_word name" >'+cur_name+'</span>'+
								'<span class="hf_word">回复</span>'+
								'<span class="last_word name">'+to_nickname+'</span>：'+
								'<span class="info_word">'+contents+'</span>'+
								'</div>'+
								'<input type="text" class="show_keybord" />'+
								'</li>';
						}
						
					}else{
						layer.open({
							content: r.msg,
							title: false,
							btn: ['确定'],
						});
					}
					commentInpVal = "";
					$(".comment_input").val(commentInpVal);
					$(".reply_cont[data-id="+reply_comment_id+"]").append(html);
				}
			})
		}else{
			$(".comment_input").focus();
		}
	});
	//监听评论输入框的内容变化
	if($(".comment_input")[0]){
		$(".comment_input")[0].addEventListener("input",function(e){
			commentInpVal = $(".comment_input").val();
			if(commentInpVal!=''){
				$(".comment_send").removeClass("no_send");
			}else{
				$(".comment_send").addClass("no_send");
			}
		});
	}



	//顶部轮播图
	var parkSwiper = new Swiper(".swiper-container",{
		pagination : '.swiper-pagination',
		paginationClickable :true,
		autoplayDisableOnInteraction : false,
		loop : true,
		autoplay : 3000
	});
	//点赞
	$(".party .like").on("click",function(){
		var likeNum = Number($(".party .like-num").html());
		var obj = $(this);
		if($(this).hasClass("like-default")){
			var type = 1;
		}else{
			var type = 0;
		}
		$.ajax({
			url:'/Front/praise',
			type:'post',
			async:false,
			data:{id:activity_id, type:type, praise_type:'activity'},
			success:function(r){
				console.log(r);
				if(r.code == 0){
					obj.toggleClass("like-default").toggleClass("like-select");
					if(obj.hasClass("like-default")){
						likeNum --;
					}else{
						likeNum ++;
					}
					$(".party .like-num").html(likeNum);
					layer.open({
                        content: r.msg,
                        title: false,
                        btn: ['确定'],
                    });
				}else{
					layer.open({
                        content: r.msg,
                        title: false,
                        btn: ['确定'],
                    });
				}
			}
		})
	});
	//园区简介展开与收缩
		var rem = $(window).width()/375*20;
		var hei = $(".word-intro p").innerHeight()/rem;
		if(hei>4){
			$(".word-intro p").addClass("shrink-state");
			$(".shrink-btn").show();
		}else{
			$(".shrink-btn").hide();
		}
		$(".spread-btn").on("click",function(){
			$(this).siblings("a").children("p").toggleClass("shrink-state");
			$(this).hide().siblings(".shrink-btn").show();
			myScroll.refresh();
			
		});
		$(".shrink-btn").on("click",function(){
			$(this).siblings("a").children("p").toggleClass("shrink-state");
			$(this).hide().siblings(".spread-btn").show();
			myScroll.refresh();
		});
	/*$(".back-word").on("click",function()
	{

		history.go(-1);

	});*/
	//拨打电话
/*	 document.getElementById("telephone").addEventListener('tap',function(){
            var btnArray=['拨打','取消'];
            var phone= telephone;
            mui.confirm('是否拨打'+phone+'?','提示',btnArray,function(e){
                if(e.index == 0){
                    plus.device.dial(phone,false);
                }
            });
        });*/
{/literal}
</script>

{/block}